<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="num">{{ sum }}</div>
                <div class="title">本月识别总人数</div>
                <div class="grade">
                    <div class="coffee">
                        <div>
                            <div class="people"><span class="count">{{ peopleData.now.coffee }}</span><span
                                    class="month">本月</span></div>
                            <div class="identy">咖啡区识别人数</div>
                            <div class="last"><span>上月识别人数：</span><span class="number">{{ peopleData.last.coffee
                            }}</span></div>
                            <div class="compare"><span class="reduce">对比{{ percentage.coffee >= 0 ? '增加' : '减少'
                            }}：</span><span class="number">{{
                                        Math.abs(percentage.coffee) }}%</span><img src="../../../assets/down-arrow.png"
                                    class="arrow" alt="" v-if="percentage.coffee < 0"><img
                                    src="../../../assets/up-arrow.png" class="arrow" alt=""
                                    v-else-if="percentage.coffee > 0"><img src="../../../assets/right-arrow.png"
                                    class="arrow" alt="" v-else></div>
                        </div>
                    </div>
                    <div class="door">
                        <div>
                            <div class="people"><span class="count">{{ peopleData.now.gate }}</span><span
                                    class="month">本月</span></div>
                            <div class="identy">大门识别人数</div>
                            <div class="last"><span>上月识别人数：</span><span class="number">{{ peopleData.last.gate
                            }}</span></div>
                            <div class="compare"><span class="reduce">对比{{ percentage.gate >= 0 ? '增加' : '减少'
                            }}：</span><span class="number">{{
                                        Math.abs(percentage.coffee) }}%</span><img src="../../../assets/down-arrow.png"
                                    class="arrow" alt="" v-if="percentage.gate < 0"><img
                                    src="../../../assets/up-arrow.png" class="arrow" alt=""
                                    v-else-if="percentage.gate > 0"><img src="../../../assets/right-arrow.png"
                                    class="arrow" alt="" v-else></div>
                        </div>
                    </div>
                    <div class="rest">
                        <div>
                            <div class="people"><span class="count">{{ peopleData.now.rest }}</span><span
                                    class="month">本月</span></div>
                            <div class="identy">休息区识别人数</div>
                            <div class="last"><span>上月识别人数：</span><span class="number">{{ peopleData.last.rest
                            }}</span></div>
                            <div class="compare"><span class="reduce">对比{{ percentage.rest >= 0 ? '增加' : '减少'
                            }}：</span><span class="number">{{
                                        Math.abs(percentage.coffee) }}%</span><img src="../../../assets/down-arrow.png"
                                    class="arrow" alt="" v-if="percentage.rest < 0"><img
                                    src="../../../assets/up-arrow.png" class="arrow" alt=""
                                    v-else-if="percentage.rest > 0"><img src="../../../assets/right-arrow.png"
                                    class="arrow" alt="" v-else></div>
                        </div>
                    </div>
                    <div class="pay">
                        <div>
                            <div class="people"><span class="count">{{ peopleData.now.Pay }}</span><span
                                    class="month">本月</span></div>
                            <div class="identy">缴费区识别人数</div>
                            <div class="last"><span>上月识别人数：</span><span class="number">{{ peopleData.last.Pay
                            }}</span></div>
                            <div class="compare"><span class="reduce">对比{{ percentage.Pay >= 0 ? '增加' : '减少'
                            }}：</span><span class="number">{{
                                        Math.abs(percentage.coffee) }}%</span><img src="../../../assets/down-arrow.png"
                                    class="arrow" alt="" v-if="percentage.Pay < 0"><img
                                    src="../../../assets/up-arrow.png" class="arrow" alt=""
                                    v-else-if="percentage.Pay > 0"><img src="../../../assets/right-arrow.png"
                                    class="arrow" alt="" v-else></div>
                        </div>
                    </div>
                    <div class="comprehensive">
                        <div>
                            <div class="people"><span class="count">{{ peopleData.now.synthesis }}</span><span
                                    class="month">本月</span></div>
                            <div class="identy">综合业务办理区识别人数</div>
                            <div class="last"><span>上月识别人数：</span><span class="number">{{ peopleData.last.synthesis
                            }}</span></div>
                            <div class="compare"><span class="reduce">对比{{ percentage.synthesis >= 0 ? '增加' : '减少'
                            }}：</span><span class="number">{{
                                        Math.abs(percentage.coffee) }}%</span><img src="../../../assets/down-arrow.png"
                                    class="arrow" alt="" v-if="percentage.synthesis < 0"><img
                                    src="../../../assets/up-arrow.png" class="arrow" alt=""
                                    v-else-if="percentage.synthesis > 0"><img src="../../../assets/right-arrow.png"
                                    class="arrow" alt="" v-else></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { getMonthlyCount } from '@/api/statistics';

export default {
    name: "peopleNumber",  //本月识别总人数
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            nowMonth: null,
            peopleData: {
                now: {
                    coffee: 0,
                    door: 0,
                    rest: 0,
                    pay: 0,
                    comprehensive: 0,
                },
                last: {
                    coffee: 0,
                    door: 0,
                    rest: 0,
                    pay: 0,
                    comprehensive: 0,
                },
            },
            percentage: {
                coffee: 0,
                door: 0,
                rest: 0,
                pay: 0,
                comprehensive: 0,
            },
            sum: 0
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getPeopleData();
        }
    },
    computed: {

    },

    mounted() {

    },
    created() {
        // this.getDate();
        // console.log('本月识别总人数组件加载完成...', this.nowMonth);
        // this.getPeopleData();
    },
    methods: {
        getDate() {
            // 创建一个新的Date对象
            const currentDate = new Date();

            // 获取当前的年份（四位数字）
            const currentYear = currentDate.getFullYear();

            // 获取当前的月份（0-11），并加1以转换为常见的1-12格式
            const currentMonth = currentDate.getMonth() + 1;
            // 获取当前日期中的日
            // const currentDay = currentDate.getDate();
            let year, month;

            // 注意：如果当前是1月，则上个月是上一年的12月
            if (currentMonth === 1) {
                year = currentYear - 1;
                month = 12;
            } else {
                year = currentYear;
                month = currentMonth - 1;
            }
            const formattedMonth = month.toString().padStart(2, '0');
            // 使用字符串的padStart方法确保月份是两位数

            // 拼接年份和月份，并以"YYYY-MM"格式输出
            this.nowMonth = `${year}-${formattedMonth}`;
            // console.log('nowMonth:', this.nowMonth);



        },
        async getPeopleData() {
            console.log('请求接口');

            let query = {
                month: this.nowMonth
            }
            console.log('请求参数', query);


            let result = await getMonthlyCount(query);
            if (result.code == 200) {
                this.peopleData = result.data;
                console.log('本月识别总人数', this.peopleData);

                for (const key in this.peopleData.now) {
                    this.sum += parseInt(this.peopleData.now[key]);
                }
                for (const key in this.peopleData.last) {
                    if (Object.prototype.hasOwnProperty.call(this.peopleData.now, key)) {
                        const lastValue = this.peopleData.last[key];
                        const nowValue = this.peopleData.now[key];
                        const change = nowValue - lastValue;
                        const percentage = ((change / lastValue) * 100).toFixed(2); // 保留两位小数
                        this.percentage[key] = percentage;
                    }
                }
            }
        },
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner2.png);
    padding-top: 162px;
    color: #ccd9ea;
    font-family: "等线";
}

.num {
    font-size: 70px;
    color: #58f3fc;
    font-weight: 900;
    letter-spacing: 26px;
    margin-bottom: 34px;
    font-family: "微软雅黑 ";
}

.title {
    font-size: 40px;
    letter-spacing: 84px;
    margin-bottom: 52px;
}

.grade {
    display: flex;
    justify-content: center;
}

.grade>div {
    margin-left: 28px;
    margin-right: 28px;
    width: 292px;
    height: 532px;
    position: relative;
    // opacity: 0.7;

}

.grade>div>div {
    position: absolute;
    width: 292px;
    height: 532px;
    left: 0;
    top: 0;
    padding: 52px 44px;
    z-index: 99;
    text-align: left;
}

.coffee {
    background: url('../../../assets/coffee.png') no-repeat 0 0/cover;
    margin-top: 142px;
}

.door {
    background: fixed url('../../../assets/door.png') no-repeat 0 0/cover;
    margin-top: 76px;
}

.rest {
    background: url('../../../assets/rest.png') no-repeat 0 0/cover;
}

.pay {
    background: url('../../../assets/pay.png') no-repeat 0 0/cover;
    margin-top: 76px;

}

.comprehensive {
    background: url('../../../assets/comprehensive.png') no-repeat 0 0/cover;
    margin-top: 142px;
}

.people {
    display: flex;
    align-items: center;

    .count {
        color: white;
        font-size: 24px;
        margin-right: 20px;
        font-weight: 700;
        letter-spacing: 2px;
        font-family: "微软雅黑 ";

    }

    .month {
        background-color: #58f3fc;
        border-radius: 12px;
        height: 26px;
        padding: 0 6px;
        line-height: 26px;
        color: black;
        font-size: 16px;
        font-weight: 700;
    }
}


.identy {
    margin-top: 20px;
    margin-bottom: 67px;
    font-size: 20px;
    line-height: 32px;
}

.last {
    margin-bottom: 24px;
    font-size: 20px;
}

.compare {
    display: flex;
    align-items: center;

    .reduce {
        font-size: 20px;
    }

    .arrow {
        margin-left: 4px;
        // height: 30px;
    }
}

.number {
    font-family: "微软雅黑";
}
</style>